<template>
	<el-table :data="$store.state.app.list" :height="tableHeight" :max-height="tableHeight" 
		size="small" border highlight-current-row
		style="width: 100%">
		<el-table-column type="index" label="序号" width="50"></el-table-column>
		<el-table-column label="ID" prop="id"></el-table-column>
		<el-table-column label="校区" prop="schoolDistrict"></el-table-column>
		<el-table-column label="名称" prop="name"></el-table-column>
		<el-table-column min-width="200" align="right" :render-header="renderHeaderModify">
			<template slot-scope="scope">
				<el-popover placement="left-start" width="300" trigger="hover" @show="qrcode(scope.row)">
					<el-button size="mini" slot="reference" style="margin-right:10px;" @click="download(scope.row)">
						<i class="fa fa-qrcode fa-lg" style="margin-right:3px;"></i>二维码
					</el-button>
					<div :id="'qrcode_' + scope.row.id"></div>
				</el-popover>
				<el-button size="mini" @click="$emit('edit', scope.row)" v-permission="['access-control:door:edit']">编辑
					<i class="el-icon-edit-outline"></i>
				</el-button>
				<el-button size="mini" @click="$emit('remove', scope.row)" type="danger" v-permission="['access-control:door:remove']">删除
					<i class="el-icon-delete"></i>
				</el-button>
				<el-button size="mini" @click="$emit('assignMember', scope.row)">分配人员</el-button>
			</template>
		</el-table-column>
	</el-table>
</template>

<script>
import store from '@/store';
import cfg from './js/';
import Page from '@/components/permission/Page.js';
import QRCode from 'qrcode2';
import $ from 'jquery';

export default {
	store: cfg.store,
	data() {
		return {};
	},
	methods: {
		add() {
			this.$emit('add');
		},
		renderHeaderModify() {
			const directives = [{
				name: "permission", value: ['access-control:door:add']
			}];
			return (
				<div>
					<el-button size="mini" type="primary" plain onClick={this.add} 
						{...{directives}}>添加楼栋
						<i class="el-icon-plus"></i>
					</el-button>
				</div>
			)
		},
		qrcode(domitory) {
			if($('#qrcode_' + domitory.id + " canvas").length == 0) {
				let text = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=ww8253d1ca9e938eba&redirect_uri=http%3a%2f%2fyqfkmj.gznu.edu.cn%2fweixin%2f%3fdomitoryId%3d${domitoryId}&response_type=code&scope=snsapi_privateinfo&agentid=1000044&state=STATE#wechat_redirect";
				text = text.replace("${domitoryId}", domitory.id);
				new QRCode(document.getElementById('qrcode_' + domitory.id), {
					text: text,
					width: 300, 
					height: 300,
					correctLevel : QRCode.CorrectLevel.L
				});
				let canvas = $('#qrcode_' + domitory.id + " canvas")[0];
				let ctx = canvas.getContext('2d');
				ctx.fillStyle = "rgba(0, 0, 0, 0.2)";
				ctx.fillRect(0, canvas.height - 30, canvas.width, canvas.height);
				ctx.font="bold 20px Arial";
				ctx.fillStyle = "#F56C6C";
				text = domitory.schoolDistrict + '-' + domitory.name;
				ctx.fillText(text, canvas.width - 300, canvas.height - 5);
			}
		},
		download(domitory) {
			this.qrcode(domitory);
			let data = $('#qrcode_' + domitory.id + " img")[0].src;
			let parts = data.split(';base64,');
			let contentType = parts[0].split(':')[1];
			let raw = window.atob(parts[1]);
			let rawLength = raw.length;
			let uInt8Array = new Uint8Array(rawLength);
			for (let i = 0; i < rawLength; ++i) {
				uInt8Array[i] = raw.charCodeAt(i);
			}
			let blob = new Blob([uInt8Array], {type: contentType});
			const a= document.createElement("a")
			a.href = URL.createObjectURL(blob);
			a.download = domitory.schoolDistrict + "_" + domitory.name + ".png" // 这里填保存成的文件名
			a.click()
			URL.revokeObjectURL(a.href)
		}
	},
	computed: {
		tableHeight() {
			return window.innerHeight - 200;
		}
	}
}
</script>